<!--
 * @Author: your name
 * @Date: 2022-03-07 11:13:23
 * @LastEditTime: 2022-03-07 21:29:54
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \前端练习\vue\day5\UI组件库\element table组件.html
-->
<div id="root">
  <qf-table :data="tableData">
    <qf-table-column prop="id" label="编号"></qf-table-column>
    <qf-table-column prop="name" label="姓名"></qf-table-column>
    <qf-table-column prop="age" label="年龄"></qf-table-column>
    <qf-table-column label="性别">
      <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
    </qf-table-column>
  </qf-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  Vue.component("qfTableColumn",{
    props:['prop','label'],   //将属性放到组件实例上
    template:`<span></span>`,
    mounted(){
      //组件渲染完毕后触发,相当于window.onload
      console.log(this); //this就是组件实例
      console.log(this.$parent); //父组件实例(就是qfTable)
      this.$parent.column.push(this);
    }
  })


  
  Vue.component('qfTable3',{
    props:{
      data:{
        type:Array,
        default:[],
      }
    },
    data(){
      return {
        column:[],
      }
    },
    mounted(){ //父渲染->渲染过程中解析子组件 子组件渲染->子完毕后子mounted->...->最后父mounted
      
      console.log(this.column,'xxx');
      console.log(this.column[3].$scopedSlots.default(),'虚拟DOM');
      console.log(this.column[3].$scopedSlots.default({sex:1})[0].text,'虚拟DOM');
      
    },
    template:`<table border="1" cellspacing="0" cellpadding="10">
        <thead>
          <tr>
            <th v-for="item in column">{{item.label}}</th> 
          </tr>
        </thead>
        <tbody>
          <tr v-for="trItem in data">
            <td v-for="(tdItem,i) in column">
              <!--{{trItem[tdItem.prop]}}-->
              {{column[i].$scopedSlots.default?column[i].$scopedSlots.default(trItem)[0].text:trItem[tdItem.prop]}}
            </td>
          </tr>
          <!--默认插槽 -->
          <slot></slot>
        </tbody>
      </table>`,
  })

  
  const vm = new Vue({
    el: "#root",
    data: {
      tableData: [
        { id: 1, name: "张三", age: 3, sex: 1 },
        { id: 2, name: "赵四", age: 18, sex: 2 },
        { id: 3, name: "王五", age: 32, sex: 2 },
      ],
    },
    methods: {},
  });
</script>
